<!DOCTYPE html>
<html>
<head>
    <title>Uniform Electric Field and Semi-sphere</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define drawing parameters
        const cx = 270; // Center x of the base
        const cy = 220; // Center y of the base
        const radiusY = 90; // The radius R of the semi-sphere (vertical radius of ellipse)
        const radiusX = 30; // The horizontal radius of the ellipse for perspective

        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY) {
            const headLength = 10;
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Start Drawing ---

        // 1. Draw the Electric Field Lines and Label E
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        const fieldStartX = 50;
        const fieldEndX = 520;
        const fieldYPositions = [cy - 80, cy - 40, cy, cy + 40, cy + 80];

        // The image shows 4 lines, one pointing to O. Let's replicate that.
        const originalFieldYPositions = [cy - 75, cy-25, cy, cy + 60];

        originalFieldYPositions.forEach(y => {
            if (y === cy) { // The line pointing to O
                drawArrow(ctx, fieldStartX, y, cx, y); // Arrow ends at O
                drawArrow(ctx, cx + radiusY, y, fieldEndX, y); // Line continues from the other side
            } else {
                 drawArrow(ctx, fieldStartX, y, fieldEndX, y);
            }
        });

        // Let's use the simpler, continuous lines as they better represent a uniform field passing through space.
        // Clearing the canvas to redraw cleanly
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw 4 continuous field lines
        const finalFieldYPositions = [cy - 75, cy - 35, cy + 20, cy + 70];
        finalFieldYPositions.forEach(y => {
            drawArrow(ctx, fieldStartX, y, fieldEndX, y);
        });

        ctx.font = 'italic bold 28px "Times New Roman"';
        ctx.fillStyle = 'black';
        ctx.fillText('E', fieldEndX + 20, cy + 10);

        // 2. Draw the Semi-spherical Surface
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';

        // Draw the front circular base (as an ellipse)
        ctx.beginPath();
        ctx.ellipse(cx, cy, radiusX, radiusY, 0, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the curved hemisphere profile
        ctx.beginPath();
        ctx.arc(cx, cy, radiusY, -Math.PI / 2, Math.PI / 2);
        ctx.stroke();

        // 3. Draw Labels (O, R)
        // Draw center point O
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillText('O', cx - 20, cy + 8);

        // Draw radius line R
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        const radiusAngle = 7 * Math.PI / 4;
        const radiusEndX = cx + radiusX * Math.cos(radiusAngle);
        const radiusEndY = cy + radiusY * Math.sin(radiusAngle);
        // The image shows radius to the bottom part of the circle.
        const radiusLineEndX = cx + radiusX * Math.cos(Math.PI/2.5);
        const radiusLineEndY = cy + radiusY * Math.sin(Math.PI/2.5);
        ctx.lineTo(radiusLineEndX, radiusLineEndY);
        ctx.stroke();

        // Draw label R
        ctx.fillText('R', cx + 15, cy + 50);


        // 4. Draw the Caption
        ctx.font = '22px "SimSun"';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.fillText('习题 7-14 图', canvas.width / 2, 400);

    </script>
</body>
</html>